*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
*{
		margin:0; 
		padding:0; 
		box-sizing: border-box; 
		font-family:inherit;
	}
	html, body{
		width:100%; 
		height:100%; 
		position:relative; 
		margin:0; 
		padding:0;
	}
	body{
		background: #F5F7FA url('images/texture.png') top left repeat;
		font-family: Helvetica, "Segoe UI", Arial, sans-serif;
		min-width:500px;
		color: #555658; 
	}
	
	
	.samplesnav{
		position:fixed; 
		display:block; 
		top:60px;
		float:left;
		overflow-y: auto;
		width:220px;
		height:100%;
		padding: 0 5px;
		min-width:120px;
		max-width:220px;
		border-right:2px solid #fff;
		-webkit-box-shadow:inset  -1px 0 0px 0 rgba(25,25,25,.2);
		box-shadow:inset -1px 0 0px 0 rgba(25,25,25,.2);
		background: #B5B9BE url('images/texture.png') top left repeat;
		
		
	}
		.samplesnav ul{
			width:100%;
			margin:0 auto;
			margin-top:20px;

			list-style: none;
			margin-bottom:80px;
		}
		.samplesnav li {
			display:block; 
			margin:3px auto;
			text-align: center;
			cursor:pointer;
		}
		.samplesnav img{border:none;}
		.samplesnav li a{
			margin:0 auto; 
			text-align:center; 
			text-decoration: none;
		}
		.samplesnav a:hover{
			text-decoration: underline; 
			color: #555658;
		}
		.samplesnav li h6{
			text-transform: uppercase; 
			
			font-size:10px; 
		}
		.samplesnav li.none {margin-left:10px;}
		 .samplesnav li.none h6{
			text-align:left;
			line-height:20px; 
			text-transform:none;
			font-size:12px; 
		}
	.titlebar{
		background: #3D4043  url('images/texture.png') top left repeat; 
		color: #D5D6D8; 
		width:100%; 
		position:relative; 
		padding-left:40px; 
		z-index:4;
		-webkit-box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);
		box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);
		border-bottom: 1px solid #2D3033;
		border-top: 1px solid #6D7073;
	}
		.titlebar.top{
			height:60px;
			position: fixed;
		}
		.titlebar.bottom{
			height:30px;
			padding-left:20px;
		}
		.titlebar h3 {
			text-indent: -9999px;
			background: transparent url('images/header2.png') no-repeat center center;
			height:60px;
			position:absolute;
			left:0;
			width:305px;

		}
		.titlebar h4{
			position:absolute;
			right:0;
			padding-right:50px;
			margin-left:320px;
			font-size:18px;
			font-weight:100;
			height:60px;
			line-height:60px;
			color:#9DA0A8;
		}
		.handle{
			position:absolute; 
			left:20px; 
			top:50%; 
			margin-top:-16px;
			cursor:pointer; 
			opacity:0.5;
			width:30px; 
			height:30px;
			background: transparent url('images/handle.png') no-repeat center center;
		}
			.handle:hover{
				opacity:1;
			}
	.samplecontent{
		position:absolute;
		display:block;
		left:220px;
text-align:center;
		right:0;
		top:60px;
		padding:20px 20px 280px 20px;

	}
	.samplecontent h6{
		display:inline-block; 
		
		text-align: center;
		font-size:14px;
		margin-bottom:10px;
	}
	.samplecontent .description{font-size:10px; color: #757678; padding-left:10px; }
	.code{
		position: fixed;
		bottom:0;
		left:220px;
		max-height:300px;
		border:1px solid #5D6063;
		right:0;
		background: rgba(69, 71, 74,.9) url('images/texture.png') top left repeat;
		text-shadow: 0 -1px 1px #000000;
	}

		.navpills{
			padding-top:0;
			list-style:none;
			font-size:11px;

			vertical-align: top;
			display:inline-block;
			height:30px;
		}
		.navpills li {
			color: #8D9093;
			display:inline-block;
			-webkit-border-radius: 4px;
			border-radius: 4px;
			padding:5px 10px;
			margin-top:2px;
			cursor:pointer;
		}
		.navpills li:hover{
			padding:4px 9px;
			border:1px solid #5C5C5C;

		}
		.navpills li.active {
			color: #D5D6D8;
			background-color: rgba(0,0,0,.1);
			padding:4px 9px;
			border:1px solid #5C5C5C;
			-webkit-box-shadow:inset 0 2px 4px 0 rgba(0,0,0,.5);
			box-shadow:inset 0 2px 4px 0 rgba(0,0,0,.5);
		}
			.tabscontent{display:none;}
			.tabscontent li{
				margin:20px;
				list-style:none;
				padding:10px;
				border:1px solid rgba(0,0,0,.2);
				background-color: rgba(0,0,0,.1);
				-webkit-box-shadow:inset 0 -2px 1px 0 rgba(255,255,255,.2);
				box-shadow:inset 0 2px 1px 0 rgba(0,0,0,.2);
				border-bottom:1px solid rgba(255,255,255,.2);
				display:none;

			}
			.tabscontent li.active{
				display:block;
			}
		.togglearrow{
			width:26px;
			height:30px;
			margin-right:5px;
			display:inline-block;
			opacity:0.6;
			cursor: pointer;
		}
			.togglearrow:hover{opacity:1;}
			.togglearrow.arrowup{
				background: transparent url('images/arrow_up.png') no-repeat center center;
			}
			.togglearrow.arrowdown{
				background: transparent url('images/arrow_down.png') no-repeat center center;
			}
		.code .tabscontent pre{
			font-family: Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace;
			color: #EFF;
			height:220px;
			white-space: pre-wrap;
			overflow-y: auto;
		}

		.code pre::selection {
			background: rgba(34, 133, 201, 0.2); /* Safari */
			}
		.code pre::-moz-selection {
			background:  rgba(34, 133, 201, 0.2); /* Firefox */
		}

 .d_info{
	color: #757678; 
	margin:20px 20px 40px 20px;
	display:block;
	font-size:12px;
	text-align: center;
	padding:20px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: rgba(255,255,255, .4);
	border:1px solid #fff;
	-webkit-box-shadow: 0 2px 1px 0 rgba(0,0,0,.25);
	box-shadow: 0 2px 1px 0 rgba(0,0,0,.25);
}
.d_info{display:inline-block !important; padding:10px 30px 5px 20px; margin-bottom:20px !important; overflow:hidden;
	background-color: rgba(230,230,230, .1); border-color: rgba(255,255,255,.5);}
	.d_info p{background: transparent url('images/icn-map-visible.png') no-repeat 0 5px; display:inline-block; height:30px; margin-bottom:0; padding-bottom:0; vertical-align:middle; padding-left:30px; line-height:30px;}
	.d_info span{ display:inline-block; height:100%; cursor:pointer; background-color: rgba(35, 139, 55,.8); color: #fff; line-height:50px; margin:-10px -30px -6px 15px; padding: 0 20px 0 15px;}
	.d_info span:hover{  background-color: rgba(35, 139, 55,1);}
	.d_info span a {color: #fff;}
.d_info a{color: #666; font-weight:600;}
.info_wm {position:relative; width:100%; text-align:center;}
.info_wm .d_info{margin:0 auto !important; padding:5px 10px;}
.info_wm .d_info a {font-weight:normal; line-height:20px; display:inline-block; padding:3px 15px 0 15px; background: transparent url('images/jcfximg1.png') no-repeat 0 5px; padding-left:30px; background-size:  auto 80%;}
.chartcontainer{text-align: center;}

.div_thumb_c{ position:absolute;top:0px; left:0px;  z-index:1000; background-color: rgba(250, 250, 250, 0.00001);}
.thumb_container { display:inline-block; border:gray solid 1px; box-sizing:content-box; position:relative; }
.thumb_container.crop{
	position:relative; overflow:hidden; 
}
.thumb_container.obj_type_chart.icon  .container, .thumb_container.obj_type_chart.crop{width:170px; height:100px;}
.thumb_container.obj_type_radial.icon .container, .thumb_container.obj_type_radial.crop {width:140px; height:140px;}
.thumb_container.obj_type_horizontal.icon .container, .thumb_container.obj_type_horizontal.crop  {width:140px; height:50px;}
.thumb_container.obj_type_vertical.icon .container, .thumb_container.obj_type_vertical.crop {width:50px; height:140px;}
.thumb_container.obj_type_trend.icon .container, .thumb_container.obj_type_trend.crop{width:140px; height:140px;}
.thumb_container.obj_type_map.icon .container, .thumb_container.obj_type_map.crop{width:140px; height:140px;}

.thumb_container.none  { display:none;}

.chartcontainer .chart_container, .helper_div.chart_container, .thumb_container.crop .chart_container{
	width:750px;height:360px;display:block;
}
.chartcontainer .radial_container, .helper_div.radial_container, .thumb_container.crop .radial_container {
	width:200px;height:200px;display:block;
}
.chartcontainer .horizontal_container, .helper_div.horizontal_container, .thumb_container.crop .horizontal_container {
	width:250px;height:100px;display:block;
}
.chartcontainer .vertical_container, .helper_div.vertical_container, .thumb_container.crop .vertical_container {
	width:100px;height:250px;display:block;
}
.chartcontainer .trend_container, .helper_div.trend_container, .thumb_container.crop .trend_container {
	width:200px;height:200px;display:block;
}
.chartcontainer .map_container, .helper_div.map_container, .thumb_container.crop .map_container {
	width:800px;height:600px;display:block;
}

.helper_div{
	display:none !important;
}
.thumb_container.icon  .jchartfx *{
     font-family:Arial;
     font-size:8px;
}
.relevant_code{
	color:rgb(108, 213, 233);
}
.function_code{
	color:#93e24e;
}
#main a { margin:5px}
.chartcontainer >*{
	display:block;
	margin:0 auto;
}

.count1 .samplesnav {display:none;}
.count1 .samplecontent {left:20px; }
.count1 .code {left:20px; }